<template>
  <div class="chart" ref="chart" :style="style"></div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'chart',
  props: {
    options: Object,
    height: {
      type: [Number, String],
      default: 'auto'
    },
    width: {
      type: [Number, String],
      default: '100%'
    }
  },
  watch: {
    options: {
      handler: function () {
        this.chart.setOption(this.options)
      },
      deep: true
    }
  },
  computed: {
    style () {
      return {
        width: typeof this.width === 'number' ? this.width + 'px' : this.width,
        height: typeof this.height === 'number' ? this.height + 'px' : this.height
      }
    }
  },
  mounted () {
    this.initChart()
    window.addEventListener('resize', this.setOptions)
  },
  methods: {
    initChart () {
      this.chart = echarts.init(this.$refs.chart)
      this.chart.setOption(this.options)
    },
    setOptions () {
      this.chart.resize()
    }
  }
}
</script>

<style lang="scss" scoped>
.chart {
  @include wh(100%, auto);
}
</style>
